<template>
	<view>
		<view>
			<u-gap height="20" bg-color="white"></u-gap>
		</view>
		<view>
			<u-table>
				<u-tr>
					<u-th>分校名称</u-th>
					<u-th>分校位置</u-th>
					<u-th>操作</u-th>
				</u-tr>
				<view v-for="(item, index) in dataList" :key="index">
					<u-tr>
						<u-td>{{item.branchName}}</u-td>
						<u-td>{{item.branchLocation}}</u-td>
						<u-td>
							<p style="color: #007AFF;" @click="open(item)">重命名</p>
						</u-td>
					</u-tr>
				</view>
			</u-table>
		</view>
		<view>
			<u-popup v-model="addshow" mode="bottom">
				<u-cell-group title="-- 分校信息 -- ">
					<u-form v-model="form" ref="uForm">
						<u-form-item label="分校名称:" prop="branchName" label-width="auto">
							<u-input v-model="form.branchName" />
						</u-form-item>
						<u-form-item label="分校地点:" prop="branchLocation" label-width="auto">
							<u-input v-model="form.branchLocation" />
						</u-form-item>
					</u-form>
				</u-cell-group>
				<view class="btn">
					<u-button class="u-m-r-5" @click="addBranchUsage()" plain type="error">确认</u-button>
				</view>
			</u-popup>
			<u-modal v-model="show" :content="content" show-cancel-button="true" @confirm="sureToDelete()" @cancel="cancelDelete()"></u-modal>
			<u-modal v-model="xshow" :content="xcontent"></u-modal>
			<u-gap height="10" bg-color="white"></u-gap>
		</view>
		
		<view class="btn" style="padding-top: 30rpx;">
			<u-button class="u-m-r-5" @click="addBranch()" plain type="primary">增加分校</u-button>
		</view>
		<u-popup v-model="renameShow" mode="center" border-radius="20">
			<u-cell-group title="-- 分校信息 -- ">
				<u-form v-model="form" ref="uForm">
					<u-form-item label="分校名称:" prop="branchName" label-width="auto">
						<u-input  v-model="form.branchName" />
					</u-form-item>
					<u-form-item label="分校名称:" prop="branchLocation" label-width="auto">
						<u-input  v-model="form.branchLocation" />
					</u-form-item>
				</u-form>
			</u-cell-group>
			<view class="btn">
				<u-button class="u-m-r-5" @click="renameBranch()" plain type="primary">确认</u-button>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import api from '../../utils/api.js'
	export default {
		data() {
			return {
				dataList: [],
				show: false,
				content: '',
				form: {
					branchName: '',
					branchLocation: ''
				},
				addshow: false,
				deleteId: '',
				xshow: false,
				xcontent: '',
				renameShow: false,
				branchId: '',
				toastTiele: '',
				toastType: ''
			}
		},
		created() {
			this.requestData();
		},
		methods: {
			showToast() {
				this.$refs.uToast.show({
					title: this.toastTiele,
					type: this.toastType,
				})
			},
			renameBranch: function() {
				if(this.form.branchName===''||this.form.branchLocation===''){
					this.toastTiele = "输入不能为空"
					this.showToast()
					return
				}
				var branch = {
					id: this.branchId,
					branchName: this.form.branchName,
					branchLocation:this.form.branchLocation
				}
				api.updateBranchInfo(branch).then(res => {
					this.renameShow = false;
					this.branchId = '';
					this.form.branchName = '';
					if (res.code === 0) {
						this.toastTiele = "修改成功"
						this.toastType = "success"
						this.requestData()
					} else {
						this.toastTiele = "修改失败"
						this.toastType = "error"
					}
					this.showToast()
				});
			},
			open: function(branch) {
				this.renameShow = true;
				this.branchId = branch.id;
				this.form.branchName = branch.branchName;
				this.form.branchLocation = branch.branchLocation;
			},
			requestData() {
				api.getBranchList().then(res => {
					this.dataList = res.data
				})
			},
			addBranch: function() {
				this.form = {}
				this.addshow = true
			},
			sureToDelete: function() {
				api.deleteBranchById(this.deleteId).then(res => {
					if (res.code === 0) {
						this.requestData();
						this.xshow = true;
						this.xcontent = '删除成功'
					} else {
						this.xshow = true
						this.xcontent = '删除失败'
					}
				})
			},
			cancelDelete: function() {
				this.deleteId = ''
			},
			addBranchUsage: function() {
				if(this.form.branchName===''||this.form.branchLocation===''){
					this.toastTiele = "输入不能为空"
					this.showToast()
					return
				}
				let data = JSON.stringify(this.form)
				api.addDifferentBranch(data).then(res => {
					if (res.code === 0) {
						this.xshow = true
						this.xcontent = '添加成功'
						this.requestData()
					} else {
						this.xshow = true
						this.xcontent = '添加失败'
					}
				})
				this.addshow = false
			}
		}
	}
</script>

<style>
	.btn {
		margin: 0 auto;
		width: 60%;
	}
</style>
